<template>
    <div class="sszd">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 5px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                        
                            <Form :model="formItem" label-position="left" inline>
                                <Select v-model="refvip" size="small" style="width:120px">
                                    <Option value="会员用户名" key="2">会员用户名</Option>                                        
                                    <Option value="上级代理用户名" key="1">上级代理用户名</Option>
                                </Select>
                                <span>:</span>
                                <Input size="small" v-model="userName" style="width: 150px" :placeholder="'请输入'+refvip"></Input>
                               
                                <span style="margin-left: 10px;">选择日期范围：</span>
                                <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="Select date and time" style="width: 200px"></DatePicker>
                                <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 0px;" @click="searchReset">重置</Button>
                            </Form>
                        </Col>
                    </Row>
                </span>
                <div class="line-chart-con">
                    <Table border stripe :columns="title" :data="data" ></Table>
                    <Row class="margin-top-10" :gutter="10">
                        <Col :md="12" :lg="12">
                            <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                        </Col>
                    </Row>
                    
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less">
.order{
    font-size: 16px;
    margin-left: 5px;
}
.sszd{
    .ivu-form-item{
        margin-bottom:0px;
    }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
}
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            is_directly:false,
            ref_id:0,
            refvip:'会员用户名',
            lottery:'',
            model2: '',
            userName:'',
            gameInfo:{},
            userInfo:{},
            formItem:{
                time:[],
                input:''
            },
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                user_name:{
                    operator:'=',
                    value:''
                },
                ref_user_name:{
                    operator:'=',
                    value:''
                },
                gid:{
                    operator:'=',
                    value:''
                },
                status_code:{
                    operator:'=',
                    value:''
                },
                group_level:{
                    operator:'>',
                    value:'-2'
                }
            },
            order_param:'id',
            cityList: [
                    {
                        value: '-1',
                        label: '未开奖'
                    },
                    {
                        value: '1',
                        label: '已开奖'
                    },
                    {
                        value: '2',
                        label: '已撤单'
                    }
                ],
                
            data:[],
            title:[
                {
                    title:'用户名',
                    key: 'user_name',
                    align:'center',
                },
                {
                    title:'直属上级',
                    key: 'ref_user_name',
                    align:'center',
                },
                {
                    title:'用户备注',
                    key: 'user_comment',
                    align:'center',
                },
                {
                    title:'用户类型',
                    key: 'group_name',
                    align:'center',
                },
                {
                    title:'充值总额',
                    key: 'sum_recharge',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_recharge
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'提现总额',
                    key: 'sum_with_draw',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_with_draw
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'可用余额',
                    key: 'balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                // {
                //     title:'欠款总额',
                //     key: 'open_number',
                //     align:'center',
                // },
                // {
                //     title:'账户总额度',
                //     key: 'open_number',
                //     align:'center',
                // },
                {
                    title:'投注反水',
                    key: 'sum_rebate',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_rebate
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'投注总额',
                    key: 'sum_order',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_order
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'中奖总额',
                    key: 'sum_bonus',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_bonus
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                
                {
                    title:'活动赠送',
                    key: 'sum_give',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_give
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'财务核算',
                    key: 'sum_relevant',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_relevant
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                // {
                //     title:'其他',
                //     key: 'open_number',
                //     align:'center',
                // },
                // {
                //     title:'净赚利润',
                //     key: 'sum_earn',
                //     align:'center',
                // },
                {
                    title:'用户盈亏',
                    key: 'sum_earn',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_earn
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'平台盈亏',
                    key: 'open_number',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:Number(params.row.sum_earn>=0?'-'+params.row.sum_earn:Math.abs(params.row.sum_earn))
                               }
                           })
                    }
                    // render: (h, params) => {
                    //     return h('div',`${params.row.sum_earn>=0?'-'+params.row.sum_earn:Math.abs(params.row.sum_earn)}`);
                    // }
                }
            ]
                
            
        }
    },
    computed: {
        treeData () {
            return this.$store.state.app.tree.data
        }
    },
    watch: {  
        treeData: function(a, b) {  //a改变后的b改变前的
            this.is_directly=a.directly
            this.ref_id=a.id
            this.getsszd()
        }  
    }, 
    
    methods: {
        init(){
            this.$store.commit('setShowTree',{show:true,dshow:false})
            this.formItem.time=this.getNowFormatDate()
            this.gameInfo=JSON.parse(sessionStorage.gameInfo)
            this.userInfo=JSON.parse(sessionStorage.user)
            
            // this.getsszd()
            
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getsszd()
        },
        cancelOrder(r,i){
            let data={
                query:{
                    is_directly:false,
                    limit:this.page.limit,
                    order_param:this.order_param,
                    query_params:this.$oc.ocqm(this.queryData),
                    ref_id:this.userInfo.user_data.User.id
                },
                data:{
                    id:3931,
                    version:1
                }
            }
            
            this.$api.setOrder(data).then(response=>{
                response.json().then(responseJson=> {
                    
                })
            })
        },
         search(){
            this.queryData.status_code.value=this.model2
            this.queryData.gid.value=this.lottery
            switch(this.refvip)
            {
                case '会员用户名':
                    this.queryData.user_name.value=this.userName
                    this.queryData.ref_user_name.value=''
                    break;
                case '上级代理用户名':
                    this.queryData.ref_user_name.value=this.userName
                    this.queryData.user_name.value=''
                    break;
            }
            
            
            this.getsszd ()
        },
        searchReset(){
            this.formItem.time=this.getNowFormatDate()
            this.model2=''
            this.refvip='会员用户名'
            this.userName=''
            this.lottery=''
            this.search()
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getsszd()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getsszd()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
        setTime(t){
            this.formItem.time=t
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        getsszd(){
            let data={
                is_directly:this.is_directly,
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                ref_id:this.ref_id,
                time_between:`${this.formItem.time[0]},${this.formItem.time[1]}`,
            }
            this.$api.repeater(this,'getFinance',data).then(res=>{
                this.page.count=res.count
                if(res.data==null){
                    this.data=[]
                }else{
                    this.data=res.data
                }
            })
            // this.$api.getFinance(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         this.page.count=responseJson.count
            //         if(responseJson.data==null){
            //             this.data=[]
            //         }else{
            //             this.data=responseJson.data
            //         }
            //     })
            // })
        }
    },
    mounted (){
        this.init()
    }
};
</script>
